<template>
  <div class="box">
    <header></header>
    <main>
      <div class="left">
        <div class="left_top">
          <LeftTop></LeftTop>
        </div>
        <div class="left_bootom">
          <LeftBottom></LeftBottom>
        </div>
      </div>
      <div class="center">
        <div class="center_item">
          <CenterTop></CenterTop>
          <div class="table">
            <div demo-bg>
              <dv-scroll-board
                :config="config"
                style="width: 100%,height:'160px';"
                @mouseover="mouseoverHandler"
                @click="clickHandler"
              />
            </div>
          </div>
        </div>
      </div>
      <div class="right">
        <div class="right_top">
          <RightTop></RightTop>
        </div>
        <div class="right_bottom">
          <RightBottom></RightBottom>
        </div>
      </div>
    </main>
    <Centerbottom></Centerbottom>
  </div>
</template>

<script lang="ts" setup>
import LeftTop from '../../components/two/LeftTop.vue'
import LeftBottom from '../../components/two/LeftBottom.vue'
import RightTop from '../../components/two/RightTop.vue'
import RightBottom from '../../components/two/RightBottom.vue'
import Centerbottom from '../../components/Centerbottom.vue'
import CenterTop from '../../components/two/CenterTop.vue'
import { ref, reactive, onMounted } from 'vue'
import { getmoney } from '../../request/index'
const config = ref({
  headerHeight: 30,
  header: ['城市', '就职企业', '岗位', '岗位'],
  data: [
    ['行1列1', '行1列2', '行1列3'],
    ['行2列1', '行2列2', '行2列3'],
    ['行3列1', '行3列2', '行3列3'],
    ['行4列1', '行4列2', '行4列3'],
    ['行5列1', '行5列2', '行5列3'],
    ['行6列1', '行6列2', '行6列3'],
    ['行7列1', '行7列2', '行7列3'],
    ['行8列1', '行8列2', '行8列3'],
    ['行9列1', '行9列2', '行9列3'],
    ['行10列1', '行10列2', '行10列3']
  ],
  columnWidth: [30],
  align: ['center']
})
onMounted(() => {
  getmoney().then((res) => {
    // console.log(res)
    config.value.data = res.data.data.result.map((item: any, index: number) => {
      return ['上海', '百度', '前端工程师', item.salary]
    })
  })
})

const mouseoverHandler = (e: any) => {
  // console.log(e)
}

const clickHandler = (e: any) => {
  // console.log(e)
}
</script>

<style scoped lang='scss' >
.box {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  background: url('../../assets/images/pageBg.png');
}
header {
  width: 100%;
  height: 75px;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 999;
  background: url('../../assets/images/Top.png') no-repeat;
  background-size: 100% 100%;
}
main {
  font-size: 16px;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  display: flex;
}
.left {
  width: 32%;
  height: 100%;
  background: url('../../assets/images/Left.png') no-repeat;
  background-size: 100% 100%;
}
.center {
  flex: 1;
  overflow: hidden;
}
.center_item {
  color: #fff;
  margin-top: 120px;
  height: 710px;
  background: url('../../assets/images/Bitmap.png') no-repeat;
  background-size: 100% 100%;
  .table {
    width: 100%;
    height: 160px;
    overflow: hidden;
    .demo-bg {
      width: 100% !important;
      height: 160px !important;
    }
  }
}
.right {
  width: 32%;
  height: 100%;
  background: url('../../assets/images/Right.png') no-repeat;
  background-size: 100% 100%;
}
.left_top {
  margin-top: 70px;
  margin-left: 70px;
  margin-right: 80px;
}
.left_bootom {
  margin-top: 50px;
  margin-left: 70px;
  margin-right: 90px;
}
.right_top {
  margin-left: 70px;
  margin-top: 70px;
  margin-right: 80px;
}
.right_bottom {
  margin-top: 50px;
  margin-left: 80px;
  margin-right: 80px;
}
</style>